<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jq.js"></script>
    <script src="./axios.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3282846_0bvezjcoe2y.css" />
    <title>人脸检测</title>
</head>

<body>
    <div class="warpper"></div>
    <div style="text-align: center;color: #999;font-size: 12px;margin-bottom: 20px;">tip: 请选择图片</div>
    <div class="btn-box">
        <button type="button"><i class="iconfont icon-renlianshibie"></i>人脸检测</button>
    </div>
</body>

</html>
<script>
    window.onload = function () {
        //请求根路径 全局
        baseUrl = 'http://127.0.0.1/'
        //access_token 全局
        var access_token
        // 当前选中的图片路径，当进行人脸检测时用到
        var currentSrc

        //获取人脸识别的access_token
        $.get(`${baseUrl}accessToken`).then(res => {
            let data = JSON.parse(res)
            access_token = data
        })

        //获取图片列表
        $.get(baseUrl + 'userInfo').then(res => {
            res.forEach((item, index) => {
                $('.warpper').append(`<img id=img-${index} />`)
                $(".warpper").children("img:last-child").attr("src", "http://127.0.0.1/img/" + item);
            })
        })

        //点击图片时给当前选中图片来一个选中状态
        $('.warpper').click((ev) => {
            console.log(ev)
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            currentSrc = target.currentSrc
            if (target.nodeName.toLowerCase() == 'img') {
                var targetId = ev.target.id
                // alert(targetId)
                $('.warpper').children('img').removeClass('active')
                $('.warpper').find('#' + targetId).addClass('active')
            }
        })

        //点击人脸检测按钮进行人脸检测
        $('.btn-box button').click(function () {
            $.post('https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token' + access_token, {
                image: 'currentSrc',
                image_type: 'URL'
            }).then(res => {
                console.log(res, 5555)
            })
        })
    }
</script>
<style>
    .iconfont {
        margin-right: 4px;
    }

    button:hover {
        cursor: pointer
    }

    .warpper {
        width: 100%;
        /* height: 400px; */
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0 5px 0;

    }

    .warpper img {
        width: 200px;
        height: 200px;
        object-fit: cover;
        margin-left: 10px;
        cursor: pointer;
    }

    .warpper img:hover {
        box-shadow: 0 2px 12px 0 rgba(176, 187, 255, 0.5)
    }

    .btn-box {
        width: 100%;
        text-align: center;
    }

    .btn-box>button {
        background-color: #67C23A;
        border: none;
        padding: 8px 10px;
        border-radius: 6px;
        color: white;
        letter-spacing: 1px;
        font-size: 16px;
    }

    .active {
        border: red solid 1px;
    }
</style>